<template>
  <div>
    <div
        v-for="(item,index) in list" :key="index"
        style="border: 1px solid rgba(0,0,0,0.05);background-color: white;border-radius: 4px;padding: 10px;margin-bottom:5px;"
    >
      <div style="display: flex;margin-bottom:10px;">
        <div style="font-size:16px;width: 150px;">
          {{ item.billNo }}
        </div>
        <div style="font-size:16px;color: #1e9fff;flex:1;">
          {{ item.billDate }}
        </div>
        <div style="text-align:right;margin-left: 20px;">
          <span v-if="item.amount">￥<span style="font-size:16px;">{{item.amount}}</span></span>
        </div>
      </div>
      <div
          v-for="(good, ind) in item.goods" :key="ind"
          style="margin-top: 2px;background-color:rgba(0,0,0,0.02);padding: 5px;border-radius: 4px;"
      >
        <div style="display: flex;margin-bottom: 10px;">
          <div style="flex:1;" >
            <div style="font-size: 15px;line-height: 18px;color: rgba(0,0,0,0.6);">{{ good.invName }}</div>
            <div style="display:flex;margin-top: 10px;">
              <div class="price" v-if="good.price">
                <nut-price :price="good.price" ></nut-price>
              </div>
              <div style="margin-left:15px;" v-if="good.deduction">
                返
                <nut-price :price="good.deduction" size="small"></nut-price>
              </div>
              <div v-if="good.send" style="margin-left:15px;color: #1e9fff;font-size:13px;">{{ good.send }}</div>
            </div>
          </div>
          <div style="text-align:right;width:100px;">
            <div>
              x <span style="font-size:16px;color: #1e9fff;">{{good.qty}}</span> <span style="font-size:12px;">{{good.unit}}</span>
            </div>
            <div style="margin-top:10px;" v-if="good.amount"><nut-price :price="good.amount" size="small"></nut-price></div>
          </div>
        </div>
      </div>
      <div style="margin-top: 10px;text-align: right;display:flex;" >
        <div v-if="item.leftYe" style="flex:1;text-align:left;">
          欠款：<span style="color: #1e9fff;font-size:16px;">{{item.leftYe}}</span>
        </div>
        <div v-if="showBuy">
          <nut-button @click="buy(item)">再次购买</nut-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "OrderItem",
  props: {
    list: {type: Array, default: () => { return []}},
    showBuy: {type: Boolean, default: true}
  },
  data () {
    return {

    }
  },
  emits: ['buy'],
  methods: {
    buy (item) {
      this.$emit('buy', item)
    }
  }
}
</script>
<style scoped lang="scss">

</style>